<template>
<div class="UserPostEdit">

<van-nav-bar
  title="审核帖子"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

<van-divider>封面</van-divider>
<van-radio-group v-model="radio" direction="horizontal">
  <van-radio :name="item" v-for="(item, index) in photos" :key="index">
  <van-image
      width="80px"
      height="80px"
      fit="cover"
      :src="generateImageUrl(item)"
      />
  </van-radio>
</van-radio-group>

<van-divider>内容</van-divider>
<van-field
  v-model="title"
  rows="1"
  autosize
  label="标题"
  type="textarea"
  placeholder="请输入标题"
/>
<van-field v-model="content" rows="5" autosize label="正文" type="textarea" />

<span v-if="parts.length > 0">
<van-divider>配置清单</van-divider>
<van-cell v-for="item in parts" :key="item.id" :title="item.name" />
</span>

<span v-if="status == 0">

<van-divider>操作</van-divider>

<!-- 居中 -->
<van-row type="flex" justify="center">
  <van-col span="12" align="center"><van-button type="primary" @click="post_publish">发布帖子</van-button></van-col>
  <van-col span="12" align="center"><van-button type="danger" @click="post_del">删除帖子</van-button></van-col>
</van-row>





</span>

<div style="height:100px;"></div>
</div>
</template>

<script>


export default {
  name: 'UserPostEdit',
  props: {

  },
  components: {

  },
  data(){
    return {
      radio: null,
      photos: [],
      parts: [],
      content: '',
      title: '',
      post: null,
      status: 0,
    }
  },
  created () {
    let id = this.$route.query.id
    let status = this.$route.query.status//0待审核1审核通过
    if(!id){
      this.$toast.fail("文章不存在")
      return
    }

    this.status  = status
    this.post_detail(id)

  },
  methods: {

    post_publish () {

      if( !this.radio || !this.content || !this.title){
        this.$toast.fail("内容缺失");
        return
      }
      this.$dialog.confirm({
        title: '确定要发布吗？'
      })
        .then(() => {
          // on confirm


          var post_toast = this.$toast.loading(
          {
              message: '🚀正在发布...',
              forbidClick: true,
              duration: 0
          });

          var partsList = []
          for(let i=0;i<this.parts.length;i++){
            partsList.push(this.parts[i].id)
          }

          var formData = new FormData()

          formData.append('id', this.post.id)
          formData.append('type',this.post.type)
          formData.append('cover', this.radio)
          formData.append('title', this.title)
          formData.append('content', this.content)
          formData.append('photos', this.photos.join(','))
          formData.append('parts', partsList.join(','))

          let that = this
          this.$axios
              .post('https://www.17fpv.com/wp-json/jiangqie/v1/userpost/post-publish', formData)
              .then(response =>{
                  if (response.data.code == 1)
                  {
                    //失败
                    post_toast.clear()
                      that.$toast.fail(response.data.msg)
                  }
                  else
                  {
                    //成功

                    post_toast.clear()

                    that.$router.push({
                      path: '/admin/userpostlist'
                    })

                  }

              })
              .catch(function(error)
              {
                  console.log(error)
              });

        })
        .catch(() => {
          // on cancel
        });
    },
    post_del() {
      var formData = new FormData()

      formData.append('id', this.post.id)

      // let that = this

      this.$axios
          .post('https://www.17fpv.com/wp-json/jiangqie/v1/userpost/post-del', formData)
          .then(response =>
          {
              if (response.data.code == 1)
              {
                  this.$toast.fail(response.data.msg)
                  this.$router.push({
                    path: '/admin/userpostlist'
                  })
              }
              else
              {
                  this.$toast.success(response.data.data)
                  this.$router.push({
                    path: '/admin/userpostlist'
                  })

              }

          })
          .catch(function(error)
          {
              console.log(error)
          });
    },

    post_detail (id) {
      var formData = new FormData()

      formData.append('id', id)

      // let that = this

      this.$axios
          .post('https://www.17fpv.com/wp-json/jiangqie/v1/userpost/post-detail', formData)
          .then(response =>
          {
              if (response.data.code == 1)
              {
                  this.$toast.fail(response.data.msg)
              }
              else
              {
                let post = response.data.data.data

                this.photos = post.photos
                this.content = post.content
                this.parts = post.parts
                this.post = post
                this.title = post.title
              }

          })
          .catch(function(error)
          {
              console.log(error)
          });
    },
    generateImageUrl (url) {
      return 'https://www.17fpv.com/' + url
    },
    onClickLeft () {
      history.go(-1)
    },


  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
